<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="500px" height="500px" style="border:1px solid #000000;"></canvas>
	<canvas id="mycanvas2" width="500px" height="500px" style="border:1px solid #000000;"></canvas>
</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById("mycanvas");
	var context = canvas.getContext('2d');
	context.font = "bold 30px Times New Roman";
	context.strokeStyle = "blue"
	str = "空心字体"
	context.strokeText(str,100,30)

	context.font = "bolder 40px Arial";
	contextStyle = "blue"
	context.fillText("Hello World",100,70)

	context.font = "bolder 40px Arial";
	g = context.createLinearGradient(100,0,300,0)
	g.addColorStop(0,"pink");
	g.addColorStop(0.5,"blue");
	g.addColorStop(1,"violet")
	context.fillStyle = g
	context.fillText("Hello World",100,170)
</script>

<script type="text/javascript">
	var canvas2 = document.getElementById("mycanvas2");
	var context2 = canvas2.getContext('2d');
	context2.strokeStyle = "red";
	context2.moveTo(150,20);
	context2.lineTo(150,70);
	context2.stroke();
	context2.font = "bolder 40px Arial";
	context2.fillStyle = "blue";
	context2.textAlign = "start";
	context2.textBaseline = "bottom"
	context2.strokeStyle = "black";
	context2.moveTo(20,70);
	context2.lineTo(300,70);
	context2.stroke();
	context2.fillText("hello world",150,70)


	context2.fillStyle = "red";
	context2.textBaseline = "top";
	context2.moveTo(20,110);
	context2.lineTo(300,110);
	context2.stroke();
	context2.textAlign = "end"
	context2.fillText("hello world",150,110)

	context2.fillStyle = "green";
	context2.textBaseline = "bottom";
	context2.moveTo(20,150);
	context2.lineTo(300,150);
	context2.stroke();
	context2.textAlign = "center"
	context2.fillText("hello world",150,150)
</script>